<template>
  <view>
    <view class="addTeam">
      <!-- 正常入团 -->
      <view
        class="addItemActive"
        v-for="(item, index) in CheYoutuanList"
        :key="index"
        :style="{
          backgroundImage:
            item.type == '2' ? 'linear-gradient(to right, #fff, #fff), linear-gradient(90deg, #E49750, #fff)' : '',
        }"
        @click="item.status == '1' ? changeTab(item.name, item.type, item.id) : ''"
      >
        <view class="space-between title">
          <text>{{ item.name }}</text>
          <text style="color:#666" v-if="item.status != '1'" @click.stop="Withdrawal(item.id)">退团</text>
        </view>
        <!-- 未成团显示 -->
        <view class="group" v-if="item.status != '1'">
          <view class="text_group">
            <text>邀请{{ 3 - item.driver_count }}人,即可成功创建车友团</text>
            <!-- <uni-icons type="forward" size="20"></uni-icons> -->
          </view>
          <view class="bot_group">
            <view v-if="item.driver_avatar">
              <image
                :src="item.driver_avatar[0] ? item.driver_avatar[0].avatar : '../../static/team/peo.png'"
                mode=""
                @click.stop="invitation(item.id, item.type)"
              ></image>
              <image
                :src="item.driver_avatar[1] ? item.driver_avatar[1].avatar : '../../static/team/peo.png'"
                mode=""
                @click.stop="invitation(item.id, item.type)"
              ></image>
              <image
                :src="item.driver_avatar[2] ? item.driver_avatar[2].avatar : '../../static/team/peo.png'"
                mode=""
                @click.stop="invitation(item.id, item.type)"
              ></image>
            </view>
            <view @click.stop="invitation(item.id, item.type)">邀请好友</view>
          </view>
        </view>
        <view class="images" v-if="item.status == '1'">
          <view class="image_list">
            <image v-for="(items, index) in item.driver_avatar" :key="index" :src="items.avatar" mode=""></image>
            <text>{{ item.driver_count }}人</text>
          </view>
          <uni-icons type="forward" size="20"></uni-icons>
        </view>
        <!-- 新团特惠 -->
        <view
          class="new_list"
          style="background: linear-gradient(270deg, rgba(252, 239, 241, 0.42) 0%, rgba(255, 186, 186, 0.36) 100%)"
          v-if="item.new_price.wechat && item.type != '2' && item.status == '1'"
        >
          <view class="image_top">
            <image src="../../static/team/xt.png" mode=""></image>
            <view>
              新团特惠剩余
              <text>{{ item.new_price.day }}</text>
              天
            </view>
          </view>
          <view class="text_list">
            <view class="">
              钱包支付
              <text style="color: #FF3D3D;">{{ item.new_price.money }}</text>
              <text>元/公斤</text>
            </view>
            <view class="">
              微信支付
              <text style="color: #FF3D3D;">{{ item.new_price.wechat }}</text>
              <text>元/公斤</text>
            </view>
          </view>
        </view>
        <!-- 专享价 -->
        <view
          class="new_list"
          style="background: linear-gradient(270deg, rgba(27,145,255,0) 0%, rgba(31,152,255,0) 23%, rgba(58,196,255,0.05) 100%);"
          v-if="item.level_price.money && item.type != '2' && item.status == '1'"
        >
          <view class="image_top" style="width: 100rpx;">
            <image src="../../static/team/zx.png" mode="" style="width: 100rpx;"></image>
            <view style="width: 80rpx;margin-top: 2rpx;">专享价</view>
            <image :src="item.level_price.image" mode="widthFix"></image>
          </view>
          <view class="text_list">
            <view class="">
              钱包支付
              <text style="color: #1B91FF ;">{{ item.level_price.money }}</text>
              <text>元/公斤</text>
            </view>
            <view class="">
              微信支付
              <text style="color: #1B91FF ;">{{ item.level_price.wechat }}</text>
              <text>元/公斤</text>
            </view>
          </view>
        </view>
        <!-- 超级团 -->
        <view
          class="new_list"
          style="background:linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(244,232,199,0.13) 23%, rgba(244,232,199,0.11) 100%);"
          v-if="item.type == '2' && item.level_price.money"
        >
          <view class="image_top" style="width: 100rpx;">
            <image src="../../static/team/cjt.png" mode="" style="width: 90rpx;"></image>
            <view style="width: 80rpx;color: #E49750 ;margin-top: 3rpx;">超级团</view>
            <image src="../../static/team/hg.png" style="width: 44rpx;height: 29rpx;margin-top: 4px;"></image>
          </view>
          <view class="text_list">
            <view class="">
              钱包支付
              <text style="color:#E49750;">{{ item.level_price.money }}</text>
              <text>元/公斤</text>
            </view>
            <view class="">
              微信支付
              <text style="color: #E49750;">{{ item.level_price.wechat }}</text>
              <text>元/公斤</text>
            </view>
          </view>
        </view>
      </view>
      <view class="addItem" @click="establish()" v-if="JoinUs.create_nums != '0'">
        <uni-icons type="plus-filled" size="30" color="#1B91FF" style="margin-right: 15rpx;"></uni-icons>
        创建我的车友团
      </view>
      <view class="addItem" style="border-color: #999;color: #666;" v-if="JoinUs.add_nums != '0'">
        <image src="../../static/team/dd.png" mode="" style="width: 32rpx;height: 48rpx;margin-right: 20rpx;"></image>
        等待加入
      </view>
    </view>
    <!-- 邀请弹框 -->
    <uni-popup ref="team" type="center" style="z-index: 910">
      <Invitation :invitationAll="invitationAll"></Invitation>
    </uni-popup>
    <!-- 绑定手机号弹框 -->
    <uni-popup ref="Popup" type="center" :is-mask-click="false" style="z-index: 910">
      <phoneNe @cancel="PhonePadclose" @submit="submit" />
    </uni-popup>
    <!-- 手机号面板弹框 -->
    <uni-popup ref="PhonePadPopup" type="bottom" :is-mask-click="false" style="z-index: 910">
      <PhonePad type="bind" @close="closePhonePad" />
    </uni-popup>
    <!-- 退团弹框 -->
    <uni-popup ref="FramePopup" type="center" :is-mask-click="false" style="z-index: 910">
      <bulletFrame :title="'我再想想'" :text="'确定退团'" :content="content" @cancel="closeFrame" @submit="Subdrawal" />
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { Ref, ref } from 'vue';
import { toPublish } from '@mqtt';
import { CheYoutuan, Join } from '@/gql/team';
import { showToast, successToast,showLoading } from '@/utils/prompt';
import { getDriverID } from '@/stores/driverID';
import { useUserStore } from '@/stores/user';
import Invitation from '@c/team/invitation.vue';
import PhonePad from '@c/common/PhonePad.vue';
import bulletFrame from '@c/pobulic/BulletFrame.vue';
import { navTo } from '@/utils/navigator';
import phoneNe from '@c/mine/phone.vue';
const driver_id = getDriverID();
const userInfo = useUserStore();
const content = '您确定要退出车友团吗？';
const CheYoutuanList = ref([]);
const JoinUs: Ref<any> = ref({});
const invitationAll: Ref<any> = ref({});
const teamID = ref();
const loCode = ref();
const repeat = ref(true)//放重复点击
// refs
const team = ref(null);
const Popup = ref(null);
const PhonePadPopup = ref(null);
const FramePopup = ref(null);
/**
 * @param {Object} code 当前区域的code值
 * 获取团信息
 */
function CheYoutuans(code:string) {
  loCode.value = code;
  const type = uni.getStorageSync('type');
  const payload = {
    query: CheYoutuan,
    variables: {
      driver_id,
      code,
      type: 1,
    },
  };
  toPublish('ql/team/getTeamList', payload, (obj: any) => {
    uni.hideLoading();
    const { data } = obj;
    CheYoutuanList.value = data.get_team_list;
    if (type == 'team') {
      uni.removeStorageSync('type');
      data.get_team_list.map((item) => {
        if (item.is_main == '1') {
          invitationAll.value = item;
          team.value.open();
        }
      });
    }
  });
}
/**
 * 获取加入团与创建剩余次数
 */
function Joins() {
  const payload = {
    query: Join,
    variables: {
      driver_id,
    },
  };
  toPublish('ql/team/getMyTeam', payload, (obj: any) => {
    uni.hideLoading();
    const { data } = obj;
    JoinUs.value = data.my_team_nums;
  });
}
/**
 * @param {string} name 团名称
 * @param {number} type 团类型
 * @param {number} id   团iD
 */
function changeTab(name: string, type: number, id: number) {
  if (type === 2) {
    navTo('team/superTeam?name=' + name + '&id=' + id);
  } else {
    navTo('team/teamDetail?name=' + name + '&id=' + id);
  }
}
/**
 * 创建我的车友团
 */
function establish() {
  if (!userInfo.mobile) {
    PhonePadopen();
  } else {
    navTo('team/newTeam');
  }
}
/**
 * @param {Number} id   团ID
 * @param {number} type 团类型
 */
function invitation(id: number, type: number) {
  const num = type === 2 ? 'SuperTeam' : 'team';
  navTo('team/invitation?id=' + id + '&type=' + num);
}
/**
 * 选择未成团退团框
 * @param {Number} id   团ID
 */
function Withdrawal(id: number) {
  teamID.value = id;
  openFrame();
}
/**
 * 打开退团弹框
 */
function openFrame() {
  FramePopup.value.open();
}
/**
 * 关闭退团弹框
 */
function closeFrame() {
  FramePopup.value.close();
}
/**
 * 退出当前未成团
 */
function Subdrawal() {
  showLoading()
  if(!repeat.value){
    return
  }
  repeat.value=false
  const payload = {
    driver_id,
    team_id: Number(teamID.value),
  };
  toPublish('team/tuiTeam', payload, (obj: any) => {
    uni.hideLoading();
    const { code, msg } = obj;
    team.value.close();
    if (code === 1) {
      repeat.value=true
      successToast(msg);
      CheYoutuans(loCode.value);
      closeFrame();
      Joins();
    } else {
      repeat.value=true
      showToast(msg);
    }
  });
}
/**
 * 选择绑定手机号码
 */
function submit() {
  Popup.value.close();
  openPhonePad();
}
/**
 * 打开绑定手机号码弹框
 */
function PhonePadopen() {
  Popup.value.open();
}
/**
 * 关闭绑定手机号码弹框
 */
function PhonePadclose() {
  Popup.value.close();
}
function openPhonePad() {
  PhonePadPopup.value.open();
}
function closePhonePad() {
  PhonePadPopup.value.close();
}
defineExpose({
  CheYoutuans,
  Joins,
});
</script>

<style scoped lang="less">
@import url('../team/less/groupList.less');
</style>
